<template>
  <div class="playlist_item">
    <header>
      <div class="left" @click="back()">
        <i></i>
      </div>
      <div class="center">{{name}}</div>
    </header>
    <main>
      <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
        <ul id="list">
          <li class="data-li" v-for="(item,index) in dataList" :key="index">
            <v-playlist-card
              :top_left="top_left"
              :src="item.coverImgUrl"
              :info="item.name"
              :count="item.playCount"
            ></v-playlist-card>
          </li>
        </ul>
      </mescroll-vue>
    </main>
  </div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";
import vPlaylistCard from "@/components/playlist_card";
export default {
  components: {
    MescrollVue,
    vPlaylistCard
  },
  data() {
    return {
      top_left: false,
      name: this.$route.params.name || "欧美",
      mescroll: null, // mescroll实例对象
      mescrollUp: {
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 12 // 每页数据的数量
        },
        htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
        noMoreSize: 6, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
          warpId: "list", // 父布局的id;
          icon: require("../images/b_5.png"), // 图标,默认null
          tip: "暂无相关数据~", // 提示
          btntext: "去逛逛 >", // 按钮,默认""
          btnClick: () => {
            // 点击按钮的回调,默认null
            this.$router.push({ name: "Home" });
          }
        },
        lazyLoad: {
          use: true
        }
      },
      dataList: [] // 列表数据
    };
  },
  created() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      this.$store
        .dispatch("playlist_cat/getPlaylistCatData", {
          limit: page.size,
          order: "hot",
          cat: this.name,
          offset: page.num
        })
        .then(
          data => {
            let curPageData = data.playlists;
            if (page.num === 1) this.dataList = []; // 如果是第一页需手动制空列表
            // 把请求到的数据添加到列表
            this.dataList = this.dataList.concat(curPageData);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              // 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
              mescroll.endSuccess(curPageData.length);
            });
          },
          data => {
            mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
          }
        );
    }
  }
};
</script>
<style>
.playlist_item .mescroll-empty .empty-icon {
  margin: auto;
}
</style>
<style lang="scss" scoped>
.playlist_item {
  main {
    padding-top: 0.8rem;
    ul#list {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 0.25rem;
      padding-top: 0.4rem;
    }
  }
  header {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    left: 0rem;
    top: 0rem;
    z-index: 100;
    background-color: #fff;
    overflow: hidden;
    position: fixed;
    .left {
      position: absolute;
      top: 0.1rem;
      left: 0.2rem;
      height: 0.6rem;
      i {
        background: url(../images/axj.png) no-repeat;
        background-size: 100% 100%;
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
      }
    }
    .center {
      font-size: 0.4rem;
      color: #333;
      text-align: left;
      padding-left: 1.2rem;
    }
  }
}
</style>